<template>
  <div class="main" v-if="isShow">
    <div class="container">
      <div class="close-btn">
        <el-icon color="#fe455d" size="25px" @click="isShow = false">
          <CircleCloseFilled />
        </el-icon>
      </div>
      <div class="title">
        <div style="position: absolute; left: 50%; transform: translateX(-50%);font-size: 24px;font-weight: 600;">
          更改密码
        </div>
      </div>
      <!-- 修改密码表单 -->
      <el-form ref="changPasswordFormRef" :model="passwordForm" :rules="rules" status-icon label-position="right"
        label-width="auto">
        <el-form-item label="新密码" prop="password">
          <el-input type="password" :prefix-icon="Lock" show-password size="large" style="margin-bottom: 10px;"
            v-model="passwordForm.password" placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input type="password" :prefix-icon="Lock" show-password size="large" style="margin-bottom: 10px;"
            v-model="passwordForm.confirmPassword" placeholder="请输入确认密码" />
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button class="cancel-btn" @click="cancel(changPasswordFormRef), isShow = false">取消</el-button>
        <el-button @click="changePassword(changPasswordFormRef)">更改</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { CircleCloseFilled, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
const changPasswordFormRef = ref<FormInstance>()
// 是否展示登陆框
const isShow = ref(false)

// 展示登陆框
const show = () => {
  isShow.value = true
}

// 暴露给外部的方法
defineExpose({
  show,
})

// 修改密码数据及校验规则、逻辑等
import useChangePassword from '@/hooks/useChangePassword'
import type { FormInstance } from 'element-plus';
const { passwordForm, rules, changePassword, cancel } = useChangePassword()
</script>

<style lang='scss' scoped>
.main {
  width: 100vw;
  height: 100vh;
  background-color: var(--mask-background-color);
  backdrop-filter: blur(3px);
  /* 初始背景色透明 */
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  /* 禁用遮罩下方元素的点击事件 */
  z-index: 2;

  /* 确保遮罩在最上层 */
  .container {
    width: calc(var(--view-width) * 0.32);
    height: calc(var(--view-height) * 0.35);
    background-color: var(--background-color);
    position: relative;
    border-radius: 15px;
    padding: 20px 60px;

    .title {
      display: flex;
      justify-content: end;
      align-items: center;
      margin: 20px 0px 40px 0px;
    }

    .close-btn {
      position: absolute;
      right: 15px;
      top: 15px;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 3;

      &:hover {
        transform: scale(1.2);
      }
    }

    .footer {
      display: flex;
      justify-content: center;
      margin-top: 20px;

      button {
        width: 60px;
        height: 30px;
        background: rgba(var(--theme-color-rgb), 0.1);
        color: var(--theme-color);
        border: none;
        font-size: 14px;
        border-radius: 20px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
          transform: scale(1.05);
        }
      }

      .cancel-btn {
        background: rgba(var(--theme-blue-color-rgb), 0.1);
        color: var(--theme-blue-color);
      }
    }
  }
}
</style>
